<link rel="stylesheet" href="../../styles/css/bootstrap-slider.css">
<link rel="stylesheet" href="../../styles/css/bootstrap-slider.min.css">
<style>
#sta{
	height:655px;
	font-size:14px;
	color: #FFFFFF;
	font-family: "Microsoft YaHei";
	float:left;
}
#system-status,#other-status{
	background: #2c2f33;
	margin-top: 5px;
	margin-left: 10px;
	float: left;
	padding: 0 5px;
	border: 1px solid #31495a;
}

#system-status{
	width: 630px;
	height: 655px;
}
#other-status{
	width:290px;
	height:655px;
	padding-left: 40px;
}
#system-status-title{

}
#system-status-container{
	width:630px;
	height: 630px;
}
#system-status-container-title{
	height:30px;
	line-height: 30px;
	font-size: 16px;
	text-align: center;
}
.divider-grey-bold{
	background-color:grey;
	width: 100%;
	height: 3px;
}
#system-status-container-power{
	height: 40px;
	margin-top: 2px;
    border: 1px solid #31495a;
    width: 98%;
	line-height: 40px;
}

#system-status-container-power-text{
	margin-left:10px;
	float:left;
	width:70px;
}
#system-status-container-power-light{
	width:12px;
	height:12px;
	margin-left: 52px;
	margin-top: 14px;
	background-color: grey;
	border-radius: 6px;
	float:left;

}
.divider-grey{
	background-color:grey;
	width: 100%;
	height: 1px;
}


#system-status-container-master-main{
	height: 130px;
    width: 98%;
    margin-top: 3px;
    border: 1px solid #31495a;
}
#system-status-container-master-title span{
	font-size: 15px;
	margin-left: 40px;
	margin-top: 20px;
	margin-bottom: 15px;
}
#system-status-container-master-title
{
	border: 1px solid #31495a;
    height: 60px;
}
    
#system-status-container-main-master-item-can{
	height: 30px;
	width:200px;
	line-height: 30px;

}
#system-status-container-main-master-item-can-text{
	margin-left:12px;
	float:left;
	width:70px;
}
#system-status-container-main-master-item-can-light{
	width:12px;
	height:12px;
	margin-left: 50px;
	margin-top: 9px;
	background-color: grey;
	border-radius: 6px;
	float:left;
}


#system-status-container-main-master-item-rs{
	clear:both;
	height: 30px;
	width:200px;
	line-height: 30px;
}
#system-status-container-main-master-item-rs-text{
	margin-left:12px;
	float:left;
	width:70px;
}
#system-status-container-main-master-item-rs-light{
	width:12px;
	height:12px;
	margin-left: 50px;
	margin-top: 9px;
	background-color: grey;
	border-radius: 6px;
	float:left;
}

#system-status-container-testunit-main{
	height: 360px;
	width:100%;
}

#system-status-container-signal-main{
	height: 200px;
	width:100%;
}

.unit-slot{
	width: 21px;
	height:360px;
	float:left;
	border:1px solid #673AB7;
}

.unit-slot-text{
	width:18px;
	height:240px;
	font-size: 12px;
	line-height: 24px;
	text-align:center;
	border:1px solid #333;
	margin-left: 1px;
	margin-top: 8px; 
}
.unit-slot-light{
	width:12px;
	height:12px;
	margin-left: 4px;
	background-color: grey;
	border-radius: 6px;
}

#other-status-title{

}
#fan-status-1{
	border:1px solid white;
	margin-top: 10px;
	width:206px;
	height: 210px;
}
#fan-1-main{
	margin-top: 10px;
	margin-left: 10px;
	float:left;
}
#fan-1{
	margin-bottom: 10px;
	
}
#fan-1-text{
	margin-top: 14px;
	width: 100px;
	text-align: center;
}

#temp-1-main{
	float:left;
	margin-top: -3px;
	margin-left: 15px;
}
#temp-1{
}
#temp-1-text{
	
	text-align: center;
}


#fan-status-2{
	border:1px solid white;
	margin-top: 10px;
	width:206px;
	height: 210px;
}
#fan-2-main{
	margin-top: 10px;
	margin-left: 10px;
	float:left;
}
#fan-2{
	margin-bottom: 10px;
	
}
#fan-2-text{
	margin-top: 14px;
	width: 100px;
	text-align: center;
}

#temp-2-main{
	float:left;
	margin-top: -3px;
	margin-left: 15px;
}
#temp-2{
}
#temp-2-text{
	width: 75px;
	text-align: center;
}

#server-memmery-status{
	margin-top: 10px;
}
#server-memmery-status-text{
	margin-left: 10px;
}

#server-memmery-status-gauge{
	/*margin-top: 10px;*/
}

#server-cpu-status{
	margin-top: 10px;
	display: flex;
	flex-direction: column;

}
#server-cpu-status-text{
	margin-left: 10px;
}


#server-cpu-status-gauge{
	/*margin-top: 10px;*/
}




.bar-container{
	display: inline-block;
	width:200px;
	height: 20px;
	/*padding-right: 10px;*/
	border:1px solid #999;
	border-radius: 5px;
	margin-top: 2px;
	margin-left: 10px;
}
.h-100p{
	height:100%;
}
.bar-p{
	width:100%;
	display: inline-block;
	background: #6E6E6E;
	color:white;
	font-weight: bold;
	padding:0 5px;
	text-align: right;
	border-radius: 4px;
	border-right: 1px solid #999;
}
.platform-status{
	width:200px;
	height: 30px;
	line-height: 30px;
	margin-left: 10px;
}

.platform-status-text{
	float:left;
}

.platform-status-value{
	float:left;
}

.platform-status-light{
	width:12px;
	height:12px;
	float:right;
	margin-top: 9px;
	background-color: grey;
	border-radius: 6px;
}
.slider-handle.round {
    border-radius: 0;
    width: 14px;
    height: 14px;
}
.slider-track{
	border-radius: 0;
}
.slider-selection{
	background-image: linear-gradient(to bottom,#6ed230 0,#6ed230 100%);
	border-radius: 0px;
}
.slider.slider-horizontal .slider-handle{
	margin-top: -2px;
}
.slider-handle{
	background-image: linear-gradient(to bottom,#999 0,#555 100%);
}
#kaiguan0{
	background-image: url(../../styles/css/images/2.png);
	width: 58px;
	height: 36px;
	float:left;
	margin-left:20px;
	margin-top:10px;
}
#kaiguan1{
	background-image: url(../../styles/css/images/2.png);
	width: 58px;
	height: 36px;
	float:left;
	margin-left:20px;
	margin-top:10px;
}
.lkjMsg{
	float:left;
	line-height:36px;
	margin-left:10px;
	margin-top:10px;
	width:91px;
}
#kaiguanSelectDiv{
	margin-top:10px;
	margin-left: 10px;
    float: left;
}
#kaiguanSelect{
	margin-left: 10px;
    width: 150px;
    background: #1F2124;
    height: 38px;
    border: 1px solid #1f2124;
}
#astsStatuDiv{
	width: 98%;
    border: 1px solid #31495a;
    margin-top: 2px
}
</style>
<!-- 右侧Lais页面 -->
<head>
	<meta charset="UTF-8">
</head>
<div id="sta">
	<div id="system-status">
		<div id="system-status-title">系统状态</div>
		<div id="system-status-container">
			<div id="system-status-container-title">
				自动化仿真测试机柜
			</div>
			<div id="system-status-container-power">
				<div id="system-status-container-power-text">
					电源状态
				</div>
				<div id="system-status-container-power-light"></div>
			</div>

			<div id="system-status-container-master-main">
				<div id="system-status-container-master-title">
					<div class='lkjMsg'>LKJ-15S状态</div>
					<div id='kaiguan0'></div>
					<div id='kaiguanSelectDiv'>
						<select id='kaiguanSelect'>
							<option value='74'>74V</option>
							<option value='110'>110V</option>
						</select>
					</div>
				</div>
				<div id="system-status-container-main-master-item-can">
					<div id="system-status-container-main-master-item-can-text">
						CAN状态
					</div>
					<div id="system-status-container-main-master-item-can-light"></div>
				</div>

				<div id="system-status-container-main-master-item-rs">
					<div id="system-status-container-main-master-item-rs-text">
						网络状态
					</div>
					<div id="system-status-container-main-master-item-rs-light"></div>
				</div>
			</div>
			
			
			
			
			<div id='astsStatuDiv'>
				<div id="system-status-container-master-title">
					<div class='lkjMsg'>ASTS状态</div>
					<div id='kaiguan1'></div>
				</div>
				<div id="system-status-container-testunit-main">
					<div class="unit-slot">
						<div class="unit-slot-text">通信1</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">通信2</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">通信3</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">通信4</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">主控</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">电源状态</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">电源1</div>
						<div class="unit-slot-light"></div>
					</div>
					
	
					<div class="unit-slot">
						<div class="unit-slot-text">电源2</div>
						<div class="unit-slot-light"></div>
					</div>
					
	
	
					<div class="unit-slot">
						<div class="unit-slot-text">程控输出A</div>
						<div class="unit-slot-light"></div>
					</div>
					
	
					<div class="unit-slot">
						<div class="unit-slot-text">程控输出B</div>
						<div class="unit-slot-light"></div>
					</div>
					
	
					<div class="unit-slot">
						<div class="unit-slot-text">程控输出C</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">程控输出D</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">数字输入A</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">数字输入B</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">数字输入C</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">50 V输出</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">模拟1</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">模拟2A</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">模拟2B</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">机感</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">机械</div>
						<div class="unit-slot-light"></div>
					</div>
					
					<div class="unit-slot">
						<div class="unit-slot-text">隔离</div>
						<div class="unit-slot-light"></div>
					</div>
					
				</div>
			</div>
			
			
			
			
			
		</div>
	</div>
	<!--界面右侧一些零碎的状态-->
	<div id="other-status">
		<!--风扇状态，暴多风扇转速和温度-->
		<div id="other-status-title">风扇状态</div>
		<div id="fan-status-1">
			<div style="margin:5px">第一组风扇</div>
			<!-- <canvas id="fan-1"
				data-color-plate="#2C2F33"></canvas> -->
			<div id="fan-1-main">
				<canvas id="fan-1"
				></canvas>
			<div style='margin-left: 29px;margin-top: -8px;margin-bottom: 0px;'>
				<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="1" value='1' data-slider-max="3" data-slider-step="1" data-slider-value="1" style='width:60px;' onchange='dangweiFun(1,this)'/>
			</div>
			<div id="fan-1-text">风扇转速</div>
			</div>

			<div id="temp-1-main">
				<canvas id="temp-1"
						data-type="linear-gauge"
				        data-width="75"
				        data-height="150"
				        data-borders=false
				        data-bar-begin-circle="false"
				        data-highlights="false"
				  		data-color-plate="#2C2F33"
				   		data-color-border-shadow="#2C2F33"
						data-color-value-text="#FFFFFF"
						data-color-numbers="#FFFFFF"
						data-color-major-ticks="#FFFFFF"
						data-color-minor-ticks="#FFFFFF"
						data-color-stroke-ticks="#FFFFFF"
						data-color-bar-stroke="#FFFFFF"
						data-color-bar="#6E6E6E"
						data-color-bar-progress="#565656"
						data-font-numbers-size="10"
						data-font-units-size="10"
						data-font-value-size="10"
				        data-minor-ticks="2"
				        data-value="50"
				        data-major-ticks="0,20,40,60,80,100"
				        data-animation-rule="bounce"
				        data-animation-duration="750"
				        data-bar-width="20"
				        data-bar-stroke-width="1"
				        data-value-box-border-radius="0"
				        data-value-box=false
				        data-value-text-shadow="false"

				></canvas>
				<div id="temp-1-text">温度</div>
			</div>
		</div>
		<!--另一组风扇-->
		<div id="fan-status-2">
			<div style="margin:5px">第二组风扇</div>
			<!-- <canvas id="fan-1"
				data-color-plate="#2C2F33"></canvas> -->
			<div id="fan-2-main">
				<canvas id="fan-2" data-type="radial-gauge"
				></canvas>
			<div style='margin-left: 29px;margin-top: -8px;margin-bottom: 0px;'>
				<input id="ex9" data-slider-id='ex1Slider' type="text" data-slider-min="1" value='1' data-slider-max="3" data-slider-step="1" data-slider-value="1" style='width:60px;' onChange='dangweiFun(2,this)'/>
			</div>
			<div id="fan-2-text">风扇转速</div>
			</div>

			<div id="temp-2-main">
				<canvas id="temp-2"
						data-type="linear-gauge"
				        data-width="75"
				        data-height="150"
				        data-borders=false
				        data-bar-begin-circle="false"
				        data-highlights="false"
				  		data-color-plate="#2C2F33"
				   		data-color-border-shadow="#2C2F33"
						data-color-value-text="#FFFFFF"
						data-color-numbers="#FFFFFF"
						data-color-major-ticks="#FFFFFF"
						data-color-minor-ticks="#FFFFFF"
						data-color-stroke-ticks="#FFFFFF"
						data-color-bar-stroke="#FFFFFF"
						data-color-bar="#6E6E6E"
						data-color-bar-progress="#565656"
						data-font-numbers-size="10"
						data-font-units-size="10"
						data-font-value-size="10"
				        data-minor-ticks="2"
				        data-value="50"
				        data-major-ticks="0,20,40,60,80,100"
				        data-animation-rule="bounce"
				        data-animation-duration="750"
				        data-bar-width="20"
				        data-bar-stroke-width="1"
				        data-value-box-border-radius="0"
				        data-value-box=false
				        data-value-text-shadow="false"
				></canvas>
				<div id="temp-2-text">温度</div>
			</div>

		</div>
		<!--服务器状态，内存使用，CPU专用率-->
		<div id="server-memmery-status" >
			<div id="server-memmery-status-text">服务器内存使用情况：</div>
			<span class="bar-container">
				<span id="server-memmery-status-gauge" class="h-100p bar-p"></span>	
			</span>
		</div>
		<div id="server-cpu-status">
			<div id="server-cpu-status-text">服务器CPU使用情况：</div>
			<span class="bar-container">
				<span id="server-cpu-status-gauge" class="h-100p bar-p"></span>	
			</span>
		</div>
		<div id="platform-test-status" class="platform-status">
			<div id="platform-test-status-text" class="platform-status-text">当前测试状态：</div>
			<div id="platform-test-status-light" class="platform-status-light"></div>
		</div>
		<div id="platform-db-status" class="platform-status">
			<div id="platform-db-status-text" class="platform-status-text">当前数据库连接状态：</div>
			<div id="platform-db-status-light" class="platform-status-light"></div>
		</div>
		<div id="platform-connect-status" class="platform-status">
			<div id="platform-connect-status-text" class="platform-status-text">当前服务器连接状态：</div>
			<div id="platform-connect-status-light" class="platform-status-light"></div>
		</div>
	</div>
<!--当前测试状态，当前数据库连接状态，当前服务器连接状态-->
</div>

<script src="../../jsplugin/gauge.min.js"></script>
<script src="../../textcommon/js/sta.js"></script>
<script src="../../jsplugin/bootstrap-slider.js"></script>
<script src="../../jsplugin/bootstrap-slider.min.js"></script>
<script src="../../textcommon/js/commonfun.js"></script>
